<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    #App{
        width: 300px;
        height: 300px;
        background-color: red;
    }
   </style>
</head>

<body>
    <div id="app"></div>
    <script>
      const oBox = document.getElementById("App");
      let lastTime=0;
    //   center 是事件函数内核心代码（需要节流保护的代码）
    function center(e){
        console.log(1,this.e);
    }
    // 不要直接把核心代码交给事件，而是把封装的throttle函数交给事件，我们把核心代码交给throttle帮我们处理
    oBox.onmousemove = throttle(center,500);
    function throttle(fn,time){
        // return 的这个函数才是真正的事件函数
        let lastTime=0;
        return function(e){
            let nowTime=Date.now();
            if(nowTime-lastTime<time){
                return;
            }
            lastTime=nowTime;
            // 调用核心代码
            fn.call(this,e)
        }
    }
       
    </script>
</body>

</html>